<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>touch事件</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>移动端触摸（touch）事件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style>
          #touchLog {
            padding: 12px;
            width: 100%;
            box-sizing: border-box;
            height: 300px;
          }
        </style>
      </head>
      <body>
        <div id="touchLog">这里显示 touch 信息</div>
        <script>
            //touchstart  touchmove  touchend 三个事件
            //touches：正在触摸屏幕的所有手指的一个列表。
            //targetTouches：正在触摸当前 DOM 元素上的手指的一个列表。
            //changedTouches：涉及当前事件的手指的一个列表。
          var touchLog = document.getElementById("touchLog");
          touchLog.addEventListener("touchstart", showMsgTouchstart);
          function showMsgTouchstart(ev) {
            console.log("---touchstart---");
            console.log(ev.touches);
            console.log(ev.targetTouches);
            console.log(ev.changedTouches);
          }

          touchLog.addEventListener("touchmove", showMsgTouchmove);
          function showMsgTouchmove(ev) {
            console.log("---touchmove---");
            console.log(ev.touches);
            console.log(ev.targetTouches);
            console.log(ev.changedTouches);
          }

          touchLog.addEventListener("touchend", showMsgTouchend);
          function showMsgTouchend(ev) {
            console.log("---touchend---");
            console.log(ev.touches);
            console.log(ev.targetTouches);
            console.log(ev.changedTouches);
          }
        </script>
      </body>
    </html>
  </body>
</html>
